<template>
	<view class="page">
		<view class="part">
			<view class="mark">订单状态：<text class="staus">{{report_detail.status}}</text></view>
		</view>
		<view class="part">
			<view class="tit">客户信息</view>
			<view class="list">
				<view class="label">客户手机号：</view>
				<view class="" v-if="(report_detail.status=='接待中'&&report_detail.customer_mobile!=='')||report_detail.status!=='接待中'"  @click="goTel1(report_detail.status,report_detail.customer_mobile)">{{report_detail.customer_mobile ? report_detail.customer_mobile :'-'}}</view>
				<input v-if="identity=='receiver' && report_detail.customer_mobile=='' && report_detail.status=='接待中'" v-model="customer_mobile" class="input" type="number" placeholder="请输入11位数字">
			</view>
			<view class="list">
				<view class="label">客户姓名：</view>
				<view class="">{{report_detail.customer_name}}</view>
			</view>
			<view class="list">
				<view class="label">客户人数：</view>
				<view class="">{{report_detail.customer_number}}</view>
			</view>
			<view class="tit titbg">客户住址</view>
			<view class="list">
				<view class="label">楼盘名称：</view>
				<view class="">{{report_detail.property_name}}</view>
			</view>
			<view class="list">
				<view class="label">楼盘地址：</view>
				<view class="address">{{report_detail.property_address}}</view>
			</view>
			<view class="tit titbg">供应商信息</view>
			<view class="list">
				<view class="label">意向供应商：</view>
				<view class="">{{report_detail.supplier_name}}</view>                       
			</view>
			<view class="list">地址：{{report_detail.supplier_address}}</view>
			<view class="list">
				<view class="label">预计到访日：</view>
				<view class="">{{report_detail.visit_date}}</view>
			</view>
			<view class="list">
				<view class="label">具体时间：</view>
				<view class="">{{report_detail.visit_hour}}</view>                                            
			</view>
			<view class="tit">报备员信息</view>
			<view class="list">
				<view class="label">报备员：</view>
				<view class="">{{report_detail.reportor_name}}</view>                                            
			</view>
			<view class="list">
				<view class="label">联系方式：</view>
				<view class="" @click="goTel(report_detail.reportor_mobile)">{{report_detail.reportor_mobile}}</view>                                            
			</view>
			<view class="tit titbg">报备备注</view>
			<view class="list">
				<view class="">{{report_detail.remark}}</view>                                            
			</view>
			<view class="" v-if="report_detail.status!=='待接单'">
				<view class="tit titbg">接待员信息</view>
				<view class="list">
					<view class="label">接待员：</view>
					<view class="">{{report_detail.receiver_name}}</view>                                            
				</view>
				<view class="list">
					<view class="label">联系方式：</view>
					<view class="" @click="goTel(report_detail.receiver_mobile)">{{report_detail.receiver_mobile}}</view>                                            
				</view>
				<view class="tit titbg" >接待结果</view>
				<view class="list" v-if="report_detail.feedback!==null">
					<view class="">{{report_detail.feedback}}</view>                                            
				</view>
				<textarea class="textarea" v-if="report_detail.status=='接待中' && identity=='receiver'" v-model="feedback" placeholder="必填,请输入您的备注信息!" />
			</view>
		</view>
		<view class="btn-box" v-if="identity=='reportor'">
			<button class="submit-btn" @click="returnHandle">返回</button>
		</view>
		<view class="btn-box-2" v-if="identity=='receiver'">
			<button class="return-btn" @click="returnHandle">返回</button>
			<button class="submit-btn" v-if="report_detail.status=='待接单'" @click="receiveHandle">确认接单</button>
			<button class="submit-btn" v-if="report_detail.status=='接待中'" @click="finishHandle">接单反馈</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			      
			return {
				id:0,
				user_id:0,
				identity:'',
				report_detail:{},
				isClick:false,
				feedback:'',
				customer_mobile:''
			}
		},
		onLoad(e) {
			var self = this;
			this.id=e.id;
			this.user_id=e.user_id;
			this.identity=e.identity;
			self.$request.request({
				url:'/report/detail',
				data:{
					report_id:this.id
				},
				success:function(res){
					if(res.code==200){
						var  y = res.result;
						console.log(y)
						if(y.customer_mobile &&  y.status=="待接单"){
							
							y.customer_mobile = y.customer_mobile.substr(0,3) + "****" + y.customer_mobile.substr(7)
						}
						
						self.report_detail = y
					}else{
						
					}
				}
			});
		},
		methods: {
			returnHandle(){
				uni.redirectTo({
				    url: '../report-list/report-list?id='+this.user_id+'&identity='+this.identity
				});
			},
			receiveHandle(){
				var self = this;
				if(this.isClick) return;
				this.isClick = true;
				uni.showLoading({
				    title: '接单中'
				});
				this.$request.request({
					url:'/report/receive',
					data:{
						report_id:self.id,
						receiver_id:self.user_id
					},
					success:function(res){
						if(res.code==200){
							uni.hideLoading();
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:2000
							})
							setTimeout(function(){
								uni.redirectTo({
								    url: '../report-list/report-list?id='+self.user_id+'&identity='+self.identity
								});
							},2000)
						}else{
							
						}
					}
				});
			},
			finishHandle(){
				var self = this;
				if(self.feedback==''||self.feedback==null){
					uni.showToast({
						title:'请填写备注信息~',
						icon:"none",
						duration:2000
					})
					return false;
				}
				console.log({
						report_id:self.id,
						feedback:self.feedback,
						customer_mobile:self.customer_mobile,
					});
				this.$request.request({
					url:'/report/finish',
					data:{
						report_id:self.id,
						feedback:self.feedback,
						customer_mobile:self.report_detail.customer_mobile ? self.report_detail.customer_mobile : self.customer_mobile,
					},
					success:function(res){
						if(res.code==200){
							uni.hideLoading();
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:2000
							})
							setTimeout(function(){
								uni.redirectTo({
								    url: '../report-list/report-list?id='+self.user_id+'&identity='+self.identity
								});
							},2000)
						}else{
							
						}
					}
				});
			},
			goTel(tel){
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			},
			goTel1(status,tel){
				if(status!=="待接单"){
					uni.makePhoneCall({
					    phoneNumber: tel
					});
				}
			}
		}
	}
</script>

<style scoped>
.page{
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: #f6f6f6;
	padding-top: 20upx;
}
.tit{
	font-size: 14px;
	font-weight: bold;
	padding-left: 20upx;
}
.titbg{
	border-top: 10upx solid #f6f6f6;
	padding-top: 20upx;
}
.mark{
	font-size: 14px;
	font-weight: bold;
	padding-left: 20upx;
}
.part{
	width: 700upx;
	margin: 0 auto;
	background-color: #FFFFFF;
	border-radius: 10upx;
	box-sizing: border-box;
	padding: 10px 0;
	margin-bottom: 20upx;
}
.list{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 20upx;
	align-items: center;
	margin-top: 10upx;
	flex-shrink: 1;
}

.input,.uni-input{
	width: 350upx;
	height: 40upx;
	line-height: 40upx;
	padding-left: 20upx;
	background-color: #f6f6f6;
	border-radius: 10upx;
}
.label{
	display: inline-block;
	width: 84px;
	flex-shrink: 1;
	flex-wrap: nowrap;
}
.address{
	flex-shrink: 1;
	flex-wrap: wrap;
}
.textarea{
	width: calc(100% - 40upx);
	margin-top: 20upx;
	margin-left: 20upx;
	height: 160upx;
	background-color: #F6F6F6;
	border-radius: 10upx;
	box-sizing: border-box;
	padding: 10upx;
	font-size: 12px;
}
.btn-box{
	padding: 40upx;
	text-align: center;
}
.submit-btn{
	width: 420upx;
	height: 90upx;
	background-color: #859dc2;
	color: #FFFFFF;
	font-size: 16px;
	border-radius: 90upx;
	line-height: 90upx;
}
.return-btn{
	width: 255upx;
	height: 90upx;
	color: #859dc2;
	border: 1px solid #859dc2;
	font-size: 16px;
	border-radius: 90upx;
	line-height: 90upx;
}
.staus{
	color: #fe8f8f;
}
.btn-box-2{
	width: 700upx;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 40upx 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.btn-box-2 .submit-btn{
	width: 350upx;
}
</style>
